{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Messages ===== -->
{% for message in messages %}
<div class="alert alert-danger alert-dismissible fade show shadow-sm my-3 mx-3" role="alert">
  <strong>{{ message }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}

<!-- ===== Booking Form Section ===== -->
<div class="container py-5 d-flex justify-content-center align-items-center">
  <div class="card shadow-lg border-0 rounded-4 p-4 col-md-8">
    <h2 class="text-center text-success fw-bold mb-4">
      <i class="bi bi-calendar-check"></i> Make a Booking
    </h2>

    <form method="POST" action="/booking" class="row g-3 justify-content-center">
      {% csrf_token %}

      {% if user.is_superuser %}
      <!-- Name -->
      <div class="form-floating mb-3 col-md-8">
        <input type="text" name="name" class="form-control shadow-sm" id="name" placeholder="Enter Name for Booking">
        <label for="name">Full Name</label>
      </div>

      <!-- Phone -->
      <div class="form-floating mb-3 col-md-8">
        <input type="text" name="phone" id="phone" placeholder="Enter 10 Digit Mobile Number" class="form-control shadow-sm" maxlength="10" />
        <label for="phone">Mobile Number</label>
      </div>
      {% endif %}

      <!-- Start Date -->
      <div class="form-floating mb-3 col-md-8">
        <input type="date" name="sdate" id="sdate" placeholder="Select Date of Booking" class="form-control shadow-sm" />
        <label for="sdate">Start Date of Booking</label>
      </div>

      <!-- Start Time -->
      <div class="form-floating mb-3 col-md-8">
        <input type="time" step="3600" name="stime" id="stime" placeholder="Start Time of Booking" class="form-control shadow-sm" />
        <label for="stime">Start Time</label>
      </div>

      <!-- End Time -->
      <div class="form-floating mb-3 col-md-8">
        <input type="time" step="3600" name="etime" id="etime" placeholder="End Time of Booking" class="form-control shadow-sm" />
        <label for="etime">End Time</label>
      </div>

      <!-- Submit Button -->
      <div class="text-center mt-3">
        <button type="submit" class="btn btn-success px-5 py-2 rounded-pill shadow-sm">
          <i class="bi bi-check-circle"></i> Submit Booking
        </button>
      </div>
    </form>
  </div>
</div>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
  }

  .card {
    background-color: #ffffff;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  .form-control {
    border-radius: 12px;
    border: 1px solid #cfcfcf;
  }

  .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }

  label {
    color: #555;
  }

  button.btn-success {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .alert {
    border-radius: 12px;
  }
</style>

{% endblock body %}